<template>
	<div class="search-history">
		<van-cell title="搜索历史">
			<div v-if="isDeleteShow">
				<span @click="searchHistories.splice(0)">全部删除</span>
				&nbsp;&nbsp;
				<span @click="isDeleteShow = false">完成</span>
			</div>
			<van-icon name="delete" v-else @click="isDeleteShow = true" />
		</van-cell>
		<van-cell
			:title="item"
			v-for="(item, index) in searchHistories"
			:key="index"
			@click="onSearchItemClick(item, index)"
		>
			<van-icon name="close" v-if="isDeleteShow" />
		</van-cell>
	</div>
</template>

<script>
export default {
	name: 'SearchHistory',
	components: {},
	props: {
		searchHistories: {
			type: Array,
			required: true,
		},
	},
	data() {
		return {
			isDeleteShow: false,
		}
	},
	computed: {},
	watch: {},
	created() {},
	mounted() {},
	methods: {
		onSearchItemClick(item, index) {
			if (this.isDeleteShow) {
				// 删除记录
				this.searchHistories.splice(index, 1)
			} else {
				// 搜索操作
				this.$emit('search', item)
			}
		},
	},
}
</script>

<style scoped lang="less"></style>
